<template>
    <div>
        <h1>显示会员信息</h1>
        <div>
            姓名<input type="text" v-model="info.name"/>
            手机号<input type="text" v-model="info.phone"/>
            价格区间查询<input type="text" v-model="info.min"/>-<input type="text" v-model="info.max"/>
            时间区间查询<input type="date" v-model="info.date1"/>-<input type="date" v-model="info.date2"/>
            <input type="button" value="查询" class="btn btn-success" @click="getlist" />
        </div>
          <table class="table table-bordered">
            <tbody>
                <tr class="bg-success">
                    <td>编号</td>     
                    <td>手机号</td>          
                    <td>会员姓名</td>    
                    <td>积分</td>
                    <td>剩余余额</td>           
                    <td>生日</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list">
                    <td>{{item.Id}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.Name}}</td>                  
                    <td>{{item.Score}}</td>
                    <td style="color:red;">￥ {{item.Money.toFixed(2)}}</td>
                    <td>{{ moment(item.BirthDay).format('YYYY-MM-DD') }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success" @click="update(item.Id)" />
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment';
const router=useRouter();


//修改跳转并且传递参数
const update=(id:any)=>{
router.push({
    path:'/menberUpdate', //创造路径
    query:{id:id} //传参
})
}

const del=(id:any)=>{
   //友好提示
    let f=confirm("请问确定要删除吗？")
    if(f){
        axios({
            url:'/api/Menber/DelMenberModel',
            method:'delete',
            params:{id:id},
        }).then(rec=>{
            if(rec.data>0){
                alert("删除成功")
                getlist();
                return;
            }
            else{
                alert("删除失败")
            }
        }).catch(err=>{
            console.log()
        })
    }
   //发送网络请求进行逻辑删除

   //刷新页面
}







let info:any=reactive({
    name:'',
    phone:'',
    min:'',
    max:'',
    date1:'',
    date2:'',
})

//接受后端传递的参数
let list:any=ref ([])

onMounted(()=>{
    getlist();
})
const getlist=()=>{
  axios({
    url:'/api/Menber/GetMenberList',
    params:info,
    method:'get',
  }).then(rec=>{
    list.value=rec.data;
  })
}

</script>

<style scoped></style>